<template>
	<div class="landing">
		<div class="sreePublic">
	  		<div id="" style="text-align: center;">
	  			<em class="iconfont" @click="vfun_back">&#xe61f;</em>
	  		</div>
			注册
	  	</div>
		<div class="form">
			<ul>
				<li>
					<div class="divInput"><input placeholder="请输入手机号" v-model="operatorPhone" /></div>
				</li>
				<li>
					<div class="divInput"><input type="password" ref="password" v-model="operatorLoginPassword" placeholder="请输入密码" /></div>
					<a class="yanpass" @click="vfun_yan">
						<em class="iconfont" v-if="vue_yan">&#xe6e3;</em>
						<em class="iconfont" v-else>&#xe8ed;</em>
					</a>
				</li>
				<li>
					<div class="divInput"><input placeholder="请输入验证码"  v-model="rendCode" @keyup="vfun_pass" /></div>
					<div class="divVer" :class="{activereg:vue_phone_verifyBtn}" @click="vfun_ver">{{vue_ver}}</div>
				</li>
				<li style="border: 0;margin-top: 0.4rem;">
					<a class="landBtn" :class="{activeNo:vue_dislabe}" @click="register">注册</a>
				</li>
				<li style="border: 0;">
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';  //引入弹框
	import { MessageBox } from 'mint-ui';
	export default {
		data () {
			return {
				vue_yan:true,
      			vue_dislabe:true,
				vue_ver:'获取验证码',
				vue_phone_countDown:null,  //定时器
				vue_phone_verifyBtn:false,  //修改手机号的btn按钮可以点击
				
				operatorPhone:'',
				operatorLoginPassword:'',
				rendCode:'',
			}
		},
		methods:{
			vfun_pass(){
		  		if(this.operatorPhone!=''&& this.operatorLoginPassword!='' && this.rendCode){
		  			this.vue_dislabe=false;
		  		}else{
		  			this.vue_dislabe=true;
		  		}
		  	},
			vfun_yan(){
		  		this.vue_yan=!this.vue_yan;
		  		if (this.vue_yan) {
							this.$refs['password'].type = "password";
						} else{
							this.$refs['password'].type = "text";
						}
		  	},
			register(){
				if (this.operatorPhone=='') {
					Toast({
					  message: '请填写手机号',
					  iconClass: 'fontSize iconfont icon-shibai'
					});
					return false;
				} else{
					if(this.Public.rules.phone.test(this.operatorPhone) != true){
						Toast({
						  message: '手机号格式错误',
						  iconClass: 'fontSize iconfont icon-shibai'
						});
						return false;
					} 
				}
				if (this.operatorLoginPassword=='') {
					Toast({
						  message: '请填写密码',
						  iconClass: 'fontSize iconfont icon-shibai'
						});
					return false;
				}else{
					if (this.Public.rules.password.test(this.operatorLoginPassword) != true) {
						Toast({
						  message: '密码为6位以上数字或字母组合',
						  iconClass: 'fontSize iconfont icon-shibai'
						});
						return false;
					}
				}
				if (this.rendCode=='') {
					Toast({
						  message: '请填写验证码',
						  iconClass: 'fontSize iconfont icon-shibai'
						});
					return false;
				}
				this.axios({
					method: 'POST',
					url: "/v3/basic/members/register/"+this.rendCode,
					data:{
						"operatorPhone":this.operatorPhone,
						"operatorLoginPassword":this.md5(this.operatorLoginPassword).toUpperCase(),
					}
					}).then((res) => {
						Toast({
						  message: '注册成功',
						  iconClass: 'fontSize iconfont icon-chenggong'
						});
						localStorage.setItem("memberCode", res.data.memberCode);
						this.$router.push({path:"/my"})
							
					}).catch((err)=>{
						Toast({
						  message: err.response.data,
						  iconClass: 'fontSize iconfont icon-shibai'
						});
			  	});
			},
			vfun_ver(){
				if (this.operatorPhone=='') {
					Toast({
					  message: '请填写手机号',
					  iconClass: 'fontSize iconfont icon-shibai'
					});
					return false;
				} else{
					if(this.Public.rules.phone.test(this.operatorPhone) != true){
						Toast({
						  message: '手机号格式错误',
						  iconClass: 'fontSize iconfont icon-shibai'
						});
						return false;
					} 
				}
				this.vue_phone_verifyBtn=true;
				this.axios({
					method: 'PATCH',
					url: "/v3/basic/members/"+this.operatorPhone+"/sendPhoneVerifyCode",
					data:{}
					}).then((res) => {
						this.vfun_daoji();
					}).catch((err)=>{
						Toast({
						  message: err.response.data,
						  iconClass: 'fontSize iconfont icon-shibai'
						});
						return false;
			  	});
				
//				var time=setInterval(this.vfun_time,1000);
//				setTimeout(clearInterval(time),6000);
//				if (this.vue_time<=0) {
//					this.vue_ver='获取验证码'
//				}
				
			},
			vfun_daoji(){
				let num = 60;
				this.vue_phone_countDown = setInterval(()=>{
					this.vue_ver = num+"后重新获取";
					this.vue_phone_verifyBtn=true;
					num--;
					if(num<=-1){
						clearInterval(this.vue_phone_countDown);
						this.vue_phone_verifyBtn=false;
						this.vue_ver = "重新获取";
					}
				},1000)
			},
			vfun_back(){
		  		history.back();
		  	},
			
		},
		mounted(){
			
		}
	}
</script>

<style scoped>

	.form{
		margin-top: 1.8rem;
		
	}
	.form li{
		width: 90%;
		margin-left: 5%;
		clear: both;
		display: -webkit-box; 
		border-bottom: 1px solid #e7e7e7;
		padding: 0.2rem 0;
	}

	.divEm{
		height: 1rem;
		width: 1rem;
		line-height:1rem;
		text-align: center;
		background: #D50B0A;
	}
	.divInput{
		font-size: 25px;
		-webkit-box-flex:1;
        -moz-box-flex:1;
	}
	.divInput input{
		border: 0;
        box-sizing: border-box;
        height: 1rem;
        width: 100%;
        text-indent: 0.2rem;
        font-size: 16px;
        float: left;
	}
	.landBtn{
		display: block;
		text-align: center;
		width: 100%;
		height: 1.2rem;
        box-sizing: border-box;
        line-height: 1.2rem;
        font-size: 16px;
        border-radius:4px;
        background: #D50B0A;
        color: #fff;
	}
	.regBtn{
		display: block;
		width: 100%;
		text-align: right;
		font-size: 16px;
	}
	.divVer{
		height: 1rem;
		line-height: 1rem;
		padding: 0 0.3rem;
		font-size: 15px;
		border-left:1px solid  #e7e7e7;
	}
	.activereg{
		pointer-events: none;
	}
	.yanpass{
		position: relative;
		top: 0.2rem;
	}
	.yanpass em{
		color: #b8b8b8;
	}
	.activeNo{
		pointer-events: none;
		background: #EEEEEE;
		color: #d4d4d4;
	}
</style>